<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>主页</title>
    <link rel="stylesheet" href="../scss/index.min.css">
    <link rel="stylesheet" href="../scss/swiper-bundle.css">
    <link rel="stylesheet" href="../scss/iconfont.css">
</head>

<body>
    <!-- 页头 -->
    <div class="head">
        <input type="text" placeholder="搜索商品发现更多好货">
    </div>
    <!-- 导航 -->
    <div class="nav">
        <div class="wrap1">
            <div class="recommend">今日推荐</div>
            <div class="bannerFont">
                <!-- 菜单轮播 -->
                <div class="swiper-wrapper1 swiper-wrapper" id='listName'>
                    {{each listName}}
                    <div>{{$value.name}}</div>
                    {{/each}}
                </div>
              
            </div>
            <div class="more">
                <img src=""
                    alt="">
            </div>
        </div>

    </div>
    <!-- 小方块 -->
    <div class="seaction">
        <div class="wrap2">
            <div>
                <img src="http://img1.lukou.com/static/coupon/p/image_link/nYcOeGqvXJTkMrmEbdkWv5wiUZmt5gLV.png" alt="">
                <p>饿了么红包</p>
                <span>最高66元</span>
            </div>
            <div>
                <img src="http://img1.lukou.com/static/coupon/p/image_link/ORlaNFb306A1RuqGVWdRLJsx7yk19NgX.png" alt="">
                <p>美团红包</p>
                <span>最高56元</span>

            </div>
            <div>
                <img src="http://img1.lukou.com/static/coupon/p/image_link/USW7VNxABBDqxr8xMxJ0XIhXZLceKqMH.png" alt="">
                <p>9.9包邮</p>
            </div>
            <div>
                <img src="http://img1.lukou.com/static/coupon/p/image_link/FvGJioJJK0S2ypHWZD9eD4k1a8LfEK60.png" alt="">
                <p>话费充值</p>
                <span>91折</span>
            </div>
            <div>
                <img src="http://img1.lukou.com/static/coupon/p/image_link/L1jtf7WOt8cihkPd4PpPnsnIwpTtatZg.png" alt="">
                <p>签到红包</p>
                <span>免单</span>
            </div>
        </div>

    </div>
    <!-- 轮播 -->
    <div class="banner">
        <div class="wrap3">
            <div class="pictureBG">
                <img src="http://img6.lukou.com/static/img/seckill-title.ae0d6a5.png" alt="">
            </div>
            <div class="bannerMain swiper-container">
                <div class="swiper-wrapper">
                 
                    <div class="swiper-slide"><img src="http://img.alicdn.com/bao/uploaded/i4/645713642/O1CN01CoZTO21cm5AmBzb3D_!!0-item_pic.jpg"></div>
                    <div class="swiper-slide"><img src="http://img.alicdn.com/bao/uploaded/i2/2457133736/O1CN01HR95B31dT8ORicNmB_!!0-item_pic.jpg" alt=""></div>
                    <div class="swiper-slide"><img src="http://img.alicdn.com/bao/uploaded/i1/2207937582360/O1CN01xjF6Em1TIvPztDsqM_!!0-item_pic.jpg" alt=""></div>
                    <div class="swiper-slide"><img src="http://img.alicdn.com/bao/uploaded/i2/756239978/O1CN01fg91eV2NZydrSKKBx_!!0-item_pic.jpg" alt=""></div>
                    <div class="swiper-slide"><img src="http://img.alicdn.com/bao/uploaded/i1/1073079012/O1CN01iR4iam2GRY2oiYFqw_!!0-item_pic.jpg" alt=""></div>
                </div>
                <!-- 如果需要导航按钮 -->
                <div class="swiper-button-prev"></div>
                <div class="swiper-button-next"></div>
            </div>
        </div>
    </div>
    <!-- 主体 -->
    <div class="main">
        <div class="wrap5">
            <img src="http://img6.lukou.com/static/img/baokuan-title.df225a5.png" alt="">
            <div class="mainHeard" id='productlist'>
                {{each productlist}}
                <div class="commodity" onclick="commodityDetails({{$value.id}})">
                    <div class="productImg">
                        <img src={{$value.image}} class="imgBig">
                    </div>
                    <div class="productDisc">
                        <p class="titleName">{{$value.title}}</p>
                        <div class="commodityTip">
                            <img src=""
                                alt="">
                            <p>{{$value.dataoke.rankingTag}}</p>
                        </div>
                        <p class="hot">全天热卖NO.{{$value.dataoke.dailyRanking}}</p>
                        <div class="commodityPrice">
                            <span>券后￥</span>
                            <span class="theirPrice">{{$value.price}}</span>
                            <span class="realPrice">￥{{$value.originPrice}}</span>
                        </div>
                        <div class="coupon">
                            <div class="ticket">{{$value.couponValue}}</div>
                            <div class="monthlySales">月销{{$value.dataoke.monthSales}}</div>
                        </div>
                    </div>
                </div>
                {{/each}}

            </div>
        </div>
    </div>
    <div id="box" class="box">
        <div class="box-in"></div>
    </div>
    <!-- 页脚 -->
    <div class="footer">
            <div class="bb"><span class="iconfont icon-huidaozhuye"></span><span>首页</span></div>
            <div class="rubbish"><span class="iconfont icon-jushoucang"></span><span>好物</span></div>
            <div class="shop"><span class="iconfont icon-31gouwuchexuanzhong"></span><span>购物车</span></div>
            <div class="me"><span class="iconfont icon-wodeguanzhu"></span><span>我的</span></div>
    </div>
    <script src="../js/rem.js"></script>
    <script src="../js/swiper-bundle.js"></script>
    <script src="../js/jquery-3.6.0.js"></script>
    <script src="../js/template-web.js"></script>
    <script src="../js/index.js"></script>

</body>

</html>